<template>
    <div class="vacation">
        <div class="vacation-title">
            周末去哪儿
        </div>
        <ul>
            <li v-for="(item,index) in vacationList" :key="index" class="vacation-item">
                <div class="vacation-img">
                    <img :src="item.imgurl" alt="">
                </div>
                <div class="vacation-text">
                    <div class="vacation-tit">{{item.title}}
                    </div>
                    <div class="vacation-content">{{item.content}}</div>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    props:['vacationList'],
    data() {
        return {
            
        }
    },
}
</script>
<style scoped>
.vacation{
    background-color: #fff;
}
.vacation-item{
   padding-bottom: .2rem;
   margin-bottom: .2rem;
}
.vacation-title{
    font-size: 0.32rem;
    height: .8rem;
    line-height: .8rem;
    margin-left: .2rem;
}
.vacation-img{
    width: 100%;
}
.vacation-img img{
    width: 100%;
}
.vacation-text{
    margin-left: .2rem;
    font-size: 0.32rem;
}
.vacation-tit{
    height: .5rem;
}
.vacation-content{
    font-size: .2rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
</style>